<template>
	<div>
		<template v-for="(item, index) in menuList">
			<el-submenu v-if="item.children && item.children.length > 0" :key="index + 'el-submenu'" :index="item.path">
				<template slot="title">
					<i :class="item.meta && item.meta.icon"></i>
					<span>{{ item.meta.title }}</span>
				</template>
				<SubMenu :menuList="item.children" />
			</el-submenu>
			<el-menu-item v-else :key="index + item.path" :index="item.path">
				<template slot="title">
					<i :class="item.meta && item.meta.icon"></i>
					<span>{{ item.meta.title }}</span>
				</template>
			</el-menu-item>
		</template>
	</div>
</template>

<script>
export default {
  name: 'SubMenu',
	props: {
		menuList: {
			type: Array,
			default: () => []
		}
	},
	methods: {
		handleClickMenu(subItem) {
			if (subItem.meta.isLink) return window.open(subItem.meta.isLink, '_blank')
			this.$router.push(subItem.path)
		}
	}
}
</script>

<style lang="less" scoped>
.el-menu-item.is-active {
	background: linear-gradient(90deg, #3161ff 0%, #1f232f 100%) !important;
}
</style>
